<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Dynamic Pool Record</title>
        <style>
            html,
            body {
                height: 100vh;
            }
            .block {
                background-color: antiquewhite;
                border: 1px solid #aaa;
                text-align: center;
            }

            .markline {
                position: absolute;
                z-index: 100;
                width: 2px;
                height: 100vh;
                background: #747e8077;
            }
            .markline-label {
                color: #fff;
                width: 4rem;
                text-align: center;
                border-radius: 5px;
                font-size: 0.7rem;
                z-index: 101;
            }
            .row {
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div class="row">
                标签透明度
                <input
                    type="range"
                    min="0"
                    max="100"
                    step="1"
                    v-model="markOpacity"
                />
                <button @click="Stop">暂停</button>
                <button @click="KeepGoing">开始</button>
                <button @click="RunAWhile">工作一会</button>
                <button @click="addFactory">加入一个工作者</button>
                <div>状态 :{{pool.status}}</div>
            </div>
            <v-gantt-chart
                v-if="prepared"
                :start-time="startTime"
                :end-time="endTime"
                :time-lines="timelines"
                :datas="datas"
                :scale="12"
                :title-width="50"
                ref="gantt"
            >
                <template v-slot:block="{data,item}">
                    <!-- 你的容器块组件 -->
                    <div class="block">{{item.name}}</div>
                </template>
                <template v-slot:left="{data}">
                    <!-- 你的行名组件 -->

                    <div>{{data.id}}</div>
                </template>
                <template v-slot:title>
                    <!-- 你的表头组件 -->
                    资源池序号
                </template>
                <template v-slot:timeline="{day , getTimeScales}">
                    <!-- 你的时间刻度组件 -->
                    <span> </span>
                </template>
                <template slot="markLine" slot-scope="{timeConfig,getPosition}">
                    <span
                        class="markline"
                        :style="{  left: getPosition() + 'px',paddingTop:timeConfig.index+'rem', }"
                    >
                        <div
                            class="markline-label"
                            :style="{backgroundColor:timeConfig.color,opacity:markOpacity/100}"
                        >
                            {{timeConfig.text}}
                        </div>
                    </span>
                </template>
            </v-gantt-chart>
        </div>
    </body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/v-gantt-chart/dist/v-gantt-chart.umd.min.js"></script>
    <script type="module" src="./web/js/index.js"></script>
</html>
